<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import article from '@/api/article.js'
import { FILE_URL } from '@/api/config.js'

const paging = ref(null)
const navbarHeight = ref(0)
// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
const state = reactive({
  currentTabIndex: 0,
  categoryId: 0,
  tabsData: [],
  // 资讯数据
  newsData: [],
  loading: false,
})

const clickTabs = (id: number) => {
  state.categoryId = id
  state.currentTabIndex = id
  paging.value.reload(true)
}

const queryList = (pageNo: any, pageSize: any) => {
  getArticleCategory()

  article
    .articleLists({
      category_id: state.categoryId,
      page: pageNo,
      page_size: pageSize,
    })
    .then((res) => {
      paging.value.complete(res.data)
    })
    .catch((err) => {
      paging.value.complete(false)
    })
}

const getArticleCategory = () => {
  article
    .articleCategory()
    .then((res) => {
      console.log(res, 'getArticleCategory')
      state.tabsData = res.data
    })
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    .catch((err) => {})
}

// 跳转到资讯详情页
const navArticleDetail = (id: number) => {
  tnNavPage(`/articlePages/detail?id=${id}`)
}
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      资讯
    </TnNavbar>
    <view class="page">
      <z-paging
        ref="paging"
        v-model="state.newsData"
        :paging-style="{ paddingTop: `${navbarHeight}px` }"
        @query="queryList"
      >
        <template #top>
          <view class="tabs">
            <TnTabs v-model="state.currentTabIndex">
              <TnTabsItem
                v-for="(item, index) in state.tabsData"
                :key="index"
                :title="item.name"
                @click="clickTabs(item.id)"
              />
            </TnTabs>
          </view>
        </template>

        <template #refresher="{ refresherStatus }">
          <CustomRefresher :status="refresherStatus" />
        </template>

        <view
          v-for="(item, index) in state.newsData"
          :key="index"
          @tap.stop="navArticleDetail(item.id)"
        >
          <view class="search-item tn-shadow">
            <view class="item-info">
              <view class="info-detail">
                <view class="title">{{ item.title }}</view>
                <view class="desc tn-text-ellipsis-2">{{
                  item.introduction
                }}</view>
              </view>
              <view class="info-data">
                <view class="count-data">
                  <view class="count-item">
                    <view class="icon">
                      <TnIcon name="eye" />
                    </view>
                    <view class="data">{{ item.look_num }}</view>
                  </view>
                </view>
              </view>
            </view>
            <view v-if="item.images != ''" class="item-image">
              <image
                class="tn-image"
                :src="FILE_URL + item.images"
                mode="aspectFill"
              />
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use './styles/index.scss';
</style>
